<template>
  <div>
    <a-page-header
        style="border: 1px solid rgb(235, 237, 240)"
        title="用户管理"
        sub-title="新增、修改、删除用户"
        @back="() => $router.go(-1)"
    >
      <template slot="extra">
        <a-input-search key="1" v-model="search.key" placeholder="请输入关键词" style="width: 200px" @search="loadData" />
        <a-button key="2" type="primary" icon="plus" @click="onShowAdd">
          添加用户
        </a-button>
      </template>
      <a-row type="flex">
        <a-statistic title="所有用户" suffix="人" :value="count.all" style="margin: 0 32px;"/>
        <a-statistic title="普通用户" suffix="人" :value="count.general" style="margin: 0 32px;"/>
        <a-statistic title="管理员" suffix="人" :value="count.admin" style="margin: 0 32px;"/>
        <a-statistic title="系统管理员" suffix="人" :value="count.system" style="margin: 0 32px;"/>
      </a-row>
      <template slot="footer">
        <a-table
            :columns="columns"
            :scroll="{ x: 1000 }"
            size="middle"
            :pagination="false"
            :dataSource="dataSource"
            :loading="loading"
        >
          <span slot="type" slot-scope="type">
            <a-tag :color="['cyan', 'orange', 'purple'][type]">{{ ['普通用户', '管理员', '系统管理员'][type] }}</a-tag>
          </span>
          <span slot="action" slot-scope="record">
            <a @click="onResetUser(record.id)">重置密码</a>
            <a-divider type="vertical"/>
            <a @click="onShowEdit(record)">修改</a>
            <a-divider type="vertical"/>
            <a style="color: #eb1c25" @click="onDelUser(record.id)">删除</a>
          </span>
        </a-table>
        <br>
        <a-config-provider :locale="zhCN">
          <a-pagination size="small" :total="total" show-size-changer show-quick-jumper :pageSizeOptions="['10', '30', '50', '100']" @change="changePage" @showSizeChange="changeSize"/>
        </a-config-provider>
        <br>
      </template>
    </a-page-header>
    <a-modal :width="600" :visible="showAdd" :body-style="{ paddingBottom: '80px' }" :ok-text="currentUser ? '修改' : '添加'" cancel-text="取消" @ok="onSubmitUser" @cancel="onCloseAdd" :ok-button-props="{ props: { disabled: !enableSubmit , loading: btnSubmitLoading} }">
      <template slot="title">
        {{ currentUser ? '修改' : '添加' }}用户
        <a-popover>
          <template slot="title">
            <h3 style="font-weight: bold;">说明</h3>
          </template>
          <template slot="content">
            <h3>密码</h3>
            <p>用户初始密码为学号后6位</p>
            <h3>类型</h3>
            <p><a-tag color="cyan">普通用户</a-tag>只能操作比赛模块</p>
            <p><a-tag color="orange">管理员</a-tag>可以进行题库管理、比赛管理，但不可以删除比赛</p>
            <p><a-tag color="purple">系统管理员</a-tag>可以进行所有操作</p>
          </template>
          <a-icon type="question-circle" />
        </a-popover>
      </template>
      <a-form-model ref="ruleForm" :model="formData">
        <a-form-model-item required label="姓名">
          <a-input type="text" v-model="formData.name" placeholder="请输入姓名(10字以内)"/>
        </a-form-model-item>
        <a-form-model-item required label="学号">
          <a-input type="text" v-model="formData.number" placeholder="请输入学号(20字以内)"/>
        </a-form-model-item>
        <a-form-model-item required label="班级">
          <a-input type="text" v-model="formData.cla" placeholder="请输入班级(50字以内)"/>
        </a-form-model-item>
        <a-form-model-item required label="类型">
          <a-radio-group button-style="solid" v-model="formData.type">
            <a-radio-button :value="0">
              普通用户
            </a-radio-button>
            <a-radio-button :value="1">
              管理员
            </a-radio-button>
            <a-radio-button :value="2">
              系统管理员
            </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import global from "@/components/global";
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: "3em",
    fixed: 'left',
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "15em",
    ellipsis: true,
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: "15em",
    ellipsis: true,
  },
  {
    title: "学号",
    dataIndex: "number",
    key: "number",
    width: "15em",
    ellipsis: true,
  },
  {
    title: "班级",
    dataIndex: "cla",
    key: "cla",
    width: "15em",
    ellipsis: true,
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    width: "15em",
    ellipsis: true,
    scopedSlots: {customRender: "type"}
  },
  {
    title: "操作",
    key: "action",
    width: "15em",
    fixed: 'right',
    scopedSlots: {customRender: "action"},
  },
];


export default {
  name: "user",
  data(){
    return {
      zhCN,
      total: 0,
      search:{
        page: 0,
        size: 10,
        key: ''
      },
      loading: false,
      columns: columns,
      dataSource:[],
      count: {
        all: 0,
        general: 0,
        admin: 0,
        system: 0
      },
      showAdd: false,
      formData:{
        name: '',
        number: '',
        cla: '',
        type: 0
      },
      btnSubmitLoading: false,
      currentUser: null
    }
  },
  methods:{
    onResetUser(id){
      let that = this
      this.$confirm({
        title: '提示',
        content: '确定要重置密码吗?',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          global.http(that, 'api/User/Reset?id=' + id, {
            successText: '操作成功',
            failText: '操作失败',
          })
        },
      });
    },
    onDelUser(id){
      let that = this
      this.$confirm({
        title: '提示',
        content: '删除操作将会连带删除该用户的所有有关的试卷、比赛记录，确定要删除该用户吗?',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          global.http(that, 'api/User/Delete?id=' + id, {
            successText: '删除成功',
            failText: '删除失败',
            success(){
              that.loadData()
            }
          })
        },
      });
    },
    onSubmitUser(){
      let that = this
      this.btnSubmitLoading = true
      if(this.currentUser){
        global.http(this, 'api/User/Update', {
          data: {...that.formData, id: that.currentUser.id, class: that.formData.cla},
          successText: '修改成功',
          failText: '修改失败',
          success(){
            that.currentUser = null
            that.loadData()
            that.showAdd = false
          },
          complete(){
            that.btnSubmitLoading = false
          }
        })
      }else {
        global.http(this, 'api/User/Add', {
          data: {...that.formData, class: that.formData.cla},
          successText: '添加成功',
          failText: '添加失败',
          success(){
            that.loadData()
            that.showAdd = false
          },
          complete(){
            that.btnSubmitLoading = false
          }
        })
      }
    },
    onCloseAdd(){
      this.showAdd = false
    },
    onShowAdd(){
      this.currentUser = null
      this.formData = {
        name: '',
        number: '',
        cla: '',
        type: 0
      }
      this.showAdd = true
    },
    onShowEdit(user){
      this.currentUser = user
      this.formData = {
        name: user.name,
        number: user.number,
        cla: user.cla,
        type: user.type
      }
      this.showAdd = true
    },
    changeSize(page, size){
      this.search.page = page - 1
      this.search.size = size
      this.loadData()
    },
    changePage(page, size){
      this.search.page = page - 1
      this.search.size = size
      this.loadData()
    },
    loadData(){
      let that = this
      that.loading = true
      global.http(this, 'api/User/Search', {
        data: that.search,
        success(res){
          that.dataSource = res.data.users.map(x=>{
            x.key = x.id
            x.cla = x.class
            x.createTime = global.dateToYmdHm(x.createTime)
            return x
          })
          that.count.all = res.data.all
          that.count.general = res.data.general
          that.count.admin = res.data.admin
          that.count.system = res.data.system
          that.total = res.data.total
        },
        complete(){
          that.loading = false
        }
      })
    }
  },
  computed:{
    enableSubmit(){
      return global.strLenLimit(this.formData.name, 10) && /^\d{12}$/.test(this.formData.number) && global.strLenLimit(this.formData.cla, 50)
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>

</style>